<template>
  <el-dialog
      v-model=visible
      :title = "!dataForm.ID?'新增':'修改'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <el-form ref="formRef" :model="dataForm" :rules="dataRule" label-width="80px" @keyup.enter = "dataFormSubmit()">
      <el-form-item label="人物ID" prop="People">
        <el-input v-model="dataForm.People" placeholder="人物ID" />
      </el-form-item>
      <el-form-item label="姓名" prop="Name">
        <el-input v-model="dataForm.Name" placeholder="姓名" />
      </el-form-item>
      <el-form-item label="关系" prop="Relation">
        <el-input v-model="dataForm.Relation" placeholder="关系" />
      </el-form-item>
      <el-form-item label="性别" prop="Sex">
        <el-select v-model.number="dataForm.Sex" placeholder="请选择性别">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="Birthday">
        <el-input v-model="dataForm.Birthday" placeholder="出生日期" />
      </el-form-item>
      <el-form-item label="死亡时间" prop="DeadTime">
        <el-input v-model="dataForm.DeadTime" placeholder="出生日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit">确定</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {nextTick, reactive, ref} from "vue";
import request from '../../utils/request'
import {ElMessage} from "element-plus";
const emit = defineEmits(['refreshDataList'])

const formRef = ref()
let visible = ref(false)
const dataForm = reactive({
  ID:'',
  People:'',
  Relation: '',
  Name:'',
  Sex:1,
  Birthday:'',
  DeadTime:''
})

const options = [{
  value: 1,
  label: '男',
},{
  value: 2,
  label: '女',
}]
const dataRule = reactive({
  Name:[]
})

const resetForm = () =>{
  formRef.value.resetFields()
}

const init = (id)=>{
  dataForm.ID = id || 0
  visible.value = true
  nextTick(()=>{
    resetForm()
    if(dataForm.ID){
      request.get(`/spouse/details/${id}`).then((data)=>{
        if (data && data.code === 0){
          dataForm.ID = data.data.ID
          dataForm.People = data.data.People
          dataForm.Relation = data.data.Relation
          dataForm.Name = data.data.Name
          dataForm.Sex = data.data.Sex
          dataForm.Birthday = data.data.Birthday
          dataForm.DeadTime = data.data.DeadTime
        }
      })
    }
  })
}

const dataFormSubmit = ()=>{
  request.post(`/spouse/${!dataForm.ID ? 'create':'update'}`,{
    ID:dataForm.ID,
    People:dataForm.People,
    Name: dataForm.Name,
    Sex:dataForm.Sex,
    Relation:dataForm.Relation,
    Birthday:dataForm.Birthday,
    DeadTime:dataForm.DeadTime,
  }).then((data) =>{
    if (data && data.code === 0){
      ElMessage({
        message:"操作成功",
        type:"success",
        duration:1500,
        onClose:() =>{
          visible.value = false
          emit('refreshDataList')
        }
      })
    }else {
      ElMessage.error(data.message)
    }
  })
}
defineExpose({
  init
})

</script>

<style scoped>

</style>
